import React, { CSSProperties } from "react";
import "./style.less";
import Icon from "@/utils/icons";

interface CommonDisplayPanelProps {
  svgIcon?: string;
  title?: string;
  description?: string;
  onClick?: () => void;
  width?: number | string;
  imageSize?: number;
  descriptionStyle?: CSSProperties;
  isLoading?: boolean; // 加载状态属性
  align?: "center" | "left"; // 新增对齐方式属性
}

const CommonDisplayPanel: React.FC<CommonDisplayPanelProps> = ({
  svgIcon,
  title,
  description,
  onClick,
  width,
  imageSize = 100,
  descriptionStyle,
  isLoading = false,
  align = "center", // 默认居中对齐
}) => {
  return (
    <div
      className={`common-display-panel ${align === "left" ? "align-left" : ""}`}
      onClick={onClick}
      style={{ width: width || "auto" }}
    >
      <div className={`panel-image ${isLoading ? "panel-image-loading" : ""}`}>
        {svgIcon && (
          <Icon name={svgIcon} width={imageSize} height={imageSize} />
        )}
      </div>
      <div className="panel-content">
        <h3 className="panel-title">{title}</h3>
        <p className="panel-description" style={descriptionStyle}>
          {description}
        </p>
      </div>
    </div>
  );
};

export default CommonDisplayPanel;
